<template>
	<view class="payment">
			<view class="order">
				<view class="serial">
					订单编号: {{ orderId }}
				</view>
				<view class="price">
					价格:￥{{ price }} 
				</view>
			</view>
			
			<view class="method">
				<view class="method-box">
					选择支付方式
				</view>
				<view class="Alipay"  @tap="paytype='alipay'">
					<view class="img">
						<image style="width: 100rpx; height: 100rpx; border-radius:50%" src="../../../../static/icons/alipay.png" mode=""></image>
					</view>
					<text class="Alipay-text">
						支付宝支付
					</text>
					<view class="select">
						 <radio :checked="paytype=='alipay'"  />
					</view>
				</view>
				
				
				
				<!-- 微信 -->
				<view class="Alipay" @tap="paytype='wxpay'">
					<view class="img">
						<image style="width: 100rpx; height: 100rpx; border-radius:50%" src="../../../../static/icons/wxpay.png" mode=""></image>
					</view>
					<text class="Alipay-text">
						微信支付
					</text>
					<view class="select s">
						   <radio :checked="paytype=='wxpay'" color="#1AAD19"  />
					</view>
				</view>
			</view>
			
			
			
			
			<view class="immediately"  @click="doDeposit">
				<text class="text">立即支付</text>
				
			</view>
			<view class="clause">
					点击立即支付，即代表您同意<text style="color: #007AFF;">《条款协议》</text>
									
			</view>
	</view>
</template>

<script>
	import paymentApi from "@/api/payment.js"
	export default {
		data() {
			return {
					orderId:'',
					paytype:'alipay',//支付类型
					price:0
			}
		},
		onLoad(v) {
			this.orderId = v.orderId
			this.price = v.price;
			console.log("11",v)
		},
		methods: {
			doDeposit(){
				uni.showToast({
				    title: '支付中',
				    duration: 1000
				});
				paymentApi.payConfirm({
					userId:this.$store.getters.userId,
					orderId:this.orderId,
					payType:this.paytype
				}).then(res =>{
					if(res.code == "S"){
						uni.hideToast();
						uni.showToast({
						    title: '支付成功',
						   duration: 1000
						});
						setTimeout(() =>{
							uni.navigateTo({
							    url: '../success/success?price=' + this.price
							});
						},1500)
					}else{
						
						uni.showToast({
						    title: '支付失败',
						   
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payment{
		.order{
			font-family: PingFangSC-Regular;
			padding-left: 30rpx;
			padding-top: 30rpx;
			font-size: 30rpx;
			letter-spacing: 1.71rpx;
			line-height: 50rpx;
			.serial{
			
			}
			.price{
				
			}
		}
		.method{
				padding-left: 30rpx;
				padding-top: 60rpx;
			.method-box{
				font-size: 35rpx;
				letter-spacing: 1.71rpx;
				line-height: 50rpx;
			}
			.Alipay{
				line-height: 100rpx;
				display: flex;
			padding-top: 50rpx;
				.img{
					
				}
				.Alipay-text{
					height: 100rpx;
					padding-left: 30rpx;
					padding-top: 20rpx;
					font-size: 30rpx;
					letter-spacing: 1.71rpx;
					line-height: 50rpx;
				}
				.select{
						padding-left: 330rpx;
				}
				.select.s{
					padding-left: 365rpx;
				}
			}
		}
		.immediately{
			width: 536rpx;
			height: 94rpx;
			background: #354E44;
			border-radius: 50rpx;
			border-radius: 50rpx;
			
			margin: 0 auto;
			
			text-align: center;
			.text{
				line-height: 94rpx;
				font-size: 35rpx;
				color: #FFFFFF;
			}
			
		}
		.clause{
			color: #999;
			text-align: center;
			font-size: 20rpx;
			letter-spacing: 1.71rpx;
			line-height: 50rpx;
		}
	}
</style>
